<template>
  <view class="costype">
    <uni-table ref="table" type="default" emptyText="暂无更多数据">
      <view v-if="form.duration.length>0" class="typeName">
        按时收费价格
      </view>
      <uni-tr class="tabTr" v-if="form.duration.length>0">
        <uni-th align="center" style="background-color: #EFF8FF!important;">充电费用</uni-th>
      </uni-tr>
      <view v-for="(item, index) in form.duration" :key="index">
        <uni-tr class="tabTr">
          <uni-td align="center">
            <view class="tdView">
              {{ item.price }}元/{{ item.unit }}小时
            </view>
          </uni-td>
        </uni-tr>
      </view>
      <view v-if="form.quantity.length>0" class="typeName">
        电费服务费单价
      </view>
      <uni-tr class="tabTr" v-if="form.quantity.length>0">
        <uni-th align="center" style="background-color: #EFF8FF!important;">收费(kW·h)</uni-th>
        <view class="title_th">
          <text>电费</text>
          <text>服务费</text>
        </view>
      </uni-tr>
      <view v-for="(item, index) in form.quantity" :key="index">
        <uni-tr class="tabTr">
          <view class="title_th price_info">
            <text>{{item.price}}元/kW·h</text>
            <text>{{item.serviceFee}}元/kW·h</text>
          </view>
        </uni-tr>
      </view>
    </uni-table>
    <view style="color: #000000; font-size: 16px; margin: 15px 0px;">占仓费用</view>
    <view class="info">

      <view>充电完成后，{{ form.occupyFreeDuation || 0}}小时内免费。</view>
      <view>
        超出{{ form.occupyFreeDuation || 0}}小时，按{{ form.occupyChargePrice || 0}}元/{{ form.occupyChargeDuration || 0}}小时收费，最高收费{{ form.occupyChargeUpperLimit || 0}}元。
      </view>
      <view>免费占仓时段：{{ form.occupyFreeStartTime || 0}}-{{ form.occupyFreeEndTime || 0}}</view>
    </view>
    <view class="tips">说明：充电过程中，提前充满、充电器过载引起意外中断、用户主动停止充电等情况支付金额不予退还</view>
  </view>
</template>

<script>
  export default {
    props: {
      form: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {

      }
    }
  }
</script>

<style lang="scss">
  @import "@/static/css/common.scss";

  .tdView {
    padding: 5px;
    text-align: center;
  }

  .typeName {
    color: #000000;
    font-size: 32rpx;
    line-height: 100rpx;
  }

  .title_th {
    line-height: 60rpx;
    background: #EFF8FF;
    @include flexLayout(center, center);

    text {
      display: inline-block;
      width: 50%;
      text-align: center;
    }

    text:first-child {
      border-right: 2rpx solid #FFFFFF;
    }
  }

  .price_info {
    color: #000000;
  }

  .info {
    background: #eff8ff;
    padding: 30rpx;
    border-radius: 20rpx;
  }

  .tips {
    font-size: 12px;
    margin: 10px;
  }
</style>
